const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetPlugin = require('optimize-css-assets-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const happypack = require('happypack');
module.exports = {
    devServer: {
        contentBase:'./dll',
        hot:true
    },
    mode:"development", //development测试环境（不会压缩） production生产环境（会压缩）
    // entry:"./src/index.js", //默认打包入口文件 默认是index.js
    entry: { //多页面打包
        index:'./src/index.js',
        other:'./src/other.js'
    },
    output:{
        filename:"[name].js", //打包后的文件名，默认是main.js
        path:path.resolve(__dirname,"dist") //打包后的文件路径
    },
    optimization: {
        splitChunks: { //分割公共代码块
            cacheGroups: {
                common:{
                    chunks: "initial", //一开始就打包
                    minSize:0, //最小体积
                    minChunks:2 //出现次数
                }
            }
        }
    },
    // resolve: {
    //     modules: ['node_modules'], //要在哪里搜索包
    //     mainFields: ['style','main'],//入口文件的名称
    //     extensions: ['.js','.json','.jsx'] //文件的后缀
    // },
    // devtool: "source-map", //源码映射,会单独产生一个sourcemap文件,会标识报错的行和列(波浪线)
    // devtool: "cheap-module-source-map", //源码映射,会单独产生一个sourcemap文件,会标识报错行(波浪线)
    // devtool: "eval-source-map", //源码映射,不会单独产生一个sourcemap文件,会标识报错的行和列(光标)
    devtool: "cheap-module-eval-source-map", //源码映射,不会单独产生一个sourcemap文件,不会标识报错的列(光标)
    // watch: true,
    // watchOptions: {
    //     poll:1000, //每秒问我1000次
    //     aggregateTimeout:500, //防抖，每500毫秒更新一次
    //     ignored: /node_modules/  //忽略node_modules文件夹
    // },
    module: {
        noParse: '/jquery|lodash/',
        rules: [
            //安装 npm i css-loader style-loader -D
            //规则 css-loader：解析@import这种语法 style-loader：把css插入head标签 如果使用link标签使用miniCssExtractPlugin.loader
            //loader的特点：希望单一（一个loader只做一件事）
            //loader的用法：一个loader只用字符串，多个loader用数组[]
            //loader的顺序：从右往左执行
            //loader还可以用对象，方便配置
            {
                test:/.css$/,
                use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader']
            },
            {
                // 可以处理less文件 还可以处理sass文件(node-sass sass-loader) stylus(stylus stylus-loader)
                test:/.less$/,
                use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader']
            },
            {
                //es6转es5
                test:/.js$/,
                use: 'happypack/loader?id=js',
                // use:[{
                //     loader: "babel-loader",
                //     options:{
                //         presets:['@babel/env', '@babel/react'],
                //         "plugins": [
                //             //装饰器
                //             ["@babel/plugin-proposal-decorators", { "legacy": true }],
                //             ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                //             //Generator函数
                //             "@babel/plugin-transform-runtime"
                //         ]
                //     }
                // }],
                //只打包src文件夹
                include:path.resolve(__dirname,'src'),
                //不打包node_modules
                exclude:/node_modules/
            },
            //eslint 代码校验
            // {
            //     test:/.js$/,
            //     use:{
            //         loader: "eslint-loader",
            //         options:{
            //             enforce:'pre' //pre表示在普通loader前执行，post表示在普通loader后执行
            //         }
            //     }
            // }

            //外链式暴露全局变量
            // {
            //     test:require.resolve('jquery'),
            //     use:'expose-loader?$'
            // },

            //file-loader打包图片     url-loader图片特定大小转 base64
            {
                test:/(.jpg|.png|.gif)$/,
                use:{
                    // loader: "file-loader",
                    loader:'url-loader',
                    options:{
                        limit:5*1024, //大小为10k以下的图片转成base64//大小为10k以下的图片转成base64
                        esModule:false, //与Html-webpack-plugin冲突时添加就不报错，删除这个配置会报错
                        outputPath:'img/'
                    }
                }
            },
            // html img标签图片
            {
                test: /.html$/,
                use: 'html-withimg-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:"./public/index.html",
            filename:'index.html',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            template: "./public/other.html",
            filename:'other.html',
            chunks: ['other']
        }),
        //打包css
        new miniCssExtractPlugin({
            filename: 'css/main.css'
        }),
        // new webpack.ProvidePlugin({
        //     //如果希望在每个文件都注入$变量，但不是全局变量，可以配置:
        //     $:'jquery'
        // }),
        //压缩css插件
        new OptimizeCssAssetPlugin(),
        //清除重复文件
        // new CleanWebpackPlugin(),
        //拷贝文件
        // new copyWebpackPlugin({
        //     patterns:[
        //         {
        //             from:'./txt.js',
        //             to:'./'
        //         }
        //     ]
        // }),
        //添加版权信息
        new webpack.BannerPlugin('make by leiwei'),

        new webpack.DefinePlugin({
            DEV:'"dev"'
        }),

        new webpack.DllReferencePlugin({ //webpack Dll关联插件
            manifest:path.resolve(__dirname,'dll','manifest.json') //关联的文件
        }),

        new happypack({
            id:'js',
            use:[{
                    loader: "babel-loader",
                    options:{
                        presets:['@babel/env', '@babel/react'],
                        "plugins": [
                            //装饰器
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                            //Generator函数
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                }]
        }),
        new webpack.NamedModulesPlugin(), //打印更新的模块路径
        new webpack.HotModuleReplacementPlugin() //热更新插件
    ],
    // externals:{
    //     jquery:'$'
    // }
};
